<template>
    <div class="employer-profile">
        <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
                <span>企业信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toggleEdit">
                    {{ isEditing ? '保存' : '编辑' }}
                </el-button>
            </div>
            <!-- 编辑模式 -->
            <el-form v-if="isEditing" :model="employerForm" :rules="rules" ref="employerForm" label-width="100px">
                <el-form-item label="企业名称" prop="employerName">
                    <el-input v-model="employerForm.employerName"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="contactNumber">
                    <el-input v-model="employerForm.contactNumber"></el-input>
                </el-form-item>
                <el-form-item label="企业地址" prop="address">
                    <el-input type="textarea" v-model="employerForm.address" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <!-- 查看模式 -->
            <div v-else class="profile-content">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="企业名称">
                        {{ employerForm.employerName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                        {{ employerForm.contactNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item label="企业地址" :span="2">
                        {{ employerForm.address }}
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间">
                        {{ formatDateTime(employerForm.createTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="更新时间">
                        {{ formatDateTime(employerForm.updateTime) }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'EmployerProfile',
    data() {
        return {
            loading: false,
            isEditing: false,
            employerForm: {
                id: '',
                employerName: '',
                address: '',
                contactNumber: '',
                serviceCenterId: '',
                createTime: '',
                updateTime: ''
            },
            rules: {
                employerName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                contactNumber: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入企业地址', trigger: 'blur' },
                    { min: 5, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getEmployerInfo()
    },
    methods: {
        async getEmployerInfo() {
            this.loading = true
            try {
                const response = await this.$http.get(`/employer/${this.$store.state.user.user.referenceId}`)
                if (response.data.code === 200) {
                    this.employerForm = response.data.data
                } else {
                    this.$message.error(response.data.msg || '获取企业信息失败')
                }
            } catch (error) {
                console.error('获取企业信息失败:', error)
                this.$message.error('获取企业信息失败')
            } finally {
                this.loading = false
            }
        },
        toggleEdit() {
            if (this.isEditing) {
                // 保存编辑
                this.$refs.employerForm.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        try {
                            const response = await this.$http.post(`/employer/${this.$store.state.user.user.referenceId}`, this.employerForm)
                            if (response.data.code === 200) {
                                this.$message.success('保存成功')
                                this.isEditing = false
                                // 重新获取最新数据
                                await this.getEmployerInfo()
                            } else {
                                this.$message.error(response.data.msg || '保存失败')
                            }
                        } catch (error) {
                            console.error('保存失败:', error)
                            this.$message.error('保存失败')
                        } finally {
                            this.loading = false
                        }
                    }
                })
            } else {
                // 进入编辑模式
                this.isEditing = true
            }
        },
        formatDateTime(time) {
            if (!time) return ''
            const date = new Date(time)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
        }
    }
}
</script>

<style scoped>
.employer-profile {
    padding: 20px;
}

.profile-content {
    margin-top: 20px;
}

.el-descriptions {
    margin: 20px 0;
}

.box-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
</style> 